<!DOCTYPE html>
<html>
<head>
    <title>倩狐OA办公系统</title>
    <!--#include virtual ="/ui/oa2/inc/head.html"-->
</head>
<body>
<div id="app">
    <el-container>
        <el-header>
            <label>关键词：</label>
            <el-input v-model="list.keywords" placeholder="请输入内容" style="width:auto;"
                      @keyup.enter.native="list.page=1;list.query()"></el-input>
            <el-button type="info" icon="el-icon-search" @click="list.page=1;list.query()">搜索</el-button>
        </el-header>
        <el-main>
            <el-row v-show="list.items" :gutter="20">
                <el-col :xs="12" :sm="6" :md="4" :lg="3" :xl="2" v-for="(row, o, index) in list.items"
                        :key="o">
                    <el-card :body-style="{ padding: '0px' }" style="margin-bottom: 20px;" shadow="hover">
                        <el-row style="text-align: center">
                            <el-col :span="24" style="padding: .1rem 0 0 0;">
                                <el-image
                                        style="width: 180px; height: 180px"
                                        :src="'data:image/'+row['reg_images'][0]['format']+';base64,'+row['reg_images'][0]['image_data']"
                                        fit="contain"></el-image>
                            </el-col>
                        </el-row>
                        <el-row style="margin: .05rem .14rem;">
                            <el-col :span="24">
                                <div style="height: .32rem;">{{row.id}}  -  {{row.name}}</div>
                            </el-col>
                        </el-row>
                    </el-card>
                </el-col>
            </el-row>
        </el-main>
        <el-footer>
            <el-pagination @size-change="list.sizeChange($event)" @current-change="list.currentChange($event)"
                           :current-page="list.page" :page-sizes="[20]" :page-size="list.limit"
                           layout="total, sizes, prev, pager, next, jumper" :total="list.total">
            </el-pagination>
        </el-footer>
    </el-container>
</div>
</body>
<script>
    let vm = {
        data: {
            list: {
                keywords: "",
                url: "/flow/face/getDeviceFace",
                page: 1,
                limit: 20,
                ip: http.get('ip'),
                port: http.get('port'),
                autoLoad: true
            }
        }
    };
</script>
<style>
    body {
        background: white;
    }

    .el-card__body {
        position: relative;
    }

    .el-card__body .image {
        width: 84%;
        cursor: pointer;
    }

    .el-dialog__body {
        height: 79%;
    }

    .el-card__body .delete-button {
        position: absolute;
        right: 0;
        cursor: pointer;
        z-index: 10;
    }

    .el-card__body .el-button--mini.is-circle {
        padding: .01rem;
    }
</style>
</html>
